<template>
  <div class="grid-template-areas">
    <h3>grid-template-areas布局</h3>
    <div class="grid-template-areas-content">
      <div v-for="item in 9" :key="item" :class="'item' + item">{{ item }}</div>
    </div>
    <br>
    <pre>
      <span class="remarks">grid-template-areas用法</span>
      给每个区域起名字，然后通过grid-area来指定元素属于哪个区域
      它和grid-column和grid-row最大的区别是
      grid-template-areas可以指定多个区域，而grid-column和grid-row只能指定一个区域
      grid-column和grid-row是合并单元格
      而grid-template-areas是给命名的单元格调整大小，不会覆盖其他的的单元格
      <span class="remarks">grid-template-areas语法</span>
      grid-template-areas: 'a a a'
                                  'd e f'
                                  'g h f';
      代号grid-area:a;指定的单元格占横向3列
      代号grid-area:f;指定的单元格占纵向2列
    </pre>
  </div>
</template>
<script>
export default {
  name: 'GridTemplateAreas',
  data() {
    return {}
  },
  mounted() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.grid-template-areas {
  &-content {
    display: grid;
    gap: 10px;
    margin: 10px 0px;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 100px);
    grid-template-areas:
      'a a a'
      'd e f'
      'g h f';
    div {
      background-color: aqua;
    }
    .item1 {
      grid-area: a;
    }
    .item4{
      grid-area: f;
    }
  }
  .remarks {
    color: red;
    font-weight: bold;
  }
}
</style>
